<template>
  <view class="shopcart">
    <!-- 适配状态栏 -->
    <view class="head flex-btw">
      <!-- #ifdef APP-PLUS -->
      <view class="status_bar"></view>
      <!-- #endif -->
      <view class="top">
        <text class="tit">购物车</text>
        <!-- <view class="all">
					<u-checkbox class="checkbox" v-model="isSelectAll" @change="selectAll" size="24" shape="circle" active-color="#4fa388"> 全选</u-checkbox>
				</view> -->
      </view>
      <text class="del" @click="clearCart">清空</text>
    </view>
    <view class="content">
      <view class="have">
        <scroll-view class="scroll_height" scroll-y="true">
          <view class="all_good">
            <template v-for="(item, index) in dataList">
              <view
                v-if="item.datum_activity !== '积分'"
                :class="
                  item.is_enough == 0 || item.status == 0 || item.is_del == 1
                    ? 'flex sign_good disable'
                    : 'flex sign_good'
                "
              >
                <!-- #ifdef MP-WEIXIN-->
                <!-- 微信小程序不认v-model !只可作用value!!!!! -->
                <u-checkbox
                  class="checkbox flex-middle"
                  :value="item.isChecked"
                  :disabled="
                    item.is_enough == 0 || item.status == 0 || item.is_del == 1
                  "
                  @change="selectAction($event, index)"
                  :name="item.id"
                  size="24"
                  shape="circle"
                  active-color="#4fa388"
                ></u-checkbox>
                <!-- #endif -->
                <!-- #ifndef MP-WEIXIN-->
                <!-- 其它平台就用v-model -->
                <u-checkbox
                  class="checkbox flex-middle"
                  v-model="item.isChecked"
                  :disabled="
                    item.is_enough == 0 || item.status == 0 || item.is_del == 1
                  "
                  @change="selectAction($event, index)"
                  :name="item.id"
                  size="24"
                  shape="circle"
                  active-color="#4fa388"
                ></u-checkbox>
                <!-- #endif -->
                <view
                  class="flex"
                  style="flex: 1"
                  @click="toDetail(item.goods_id, index)"
                >
                  <view class="flex flex_col_center imgs">
                    <!-- <image class="logo" v-if="showLogo==1" :src="logo" mode="aspectFit"></image> -->
                    <image class="img" :src="item.img" mode="aspectFit"></image>
                  </view>
                  <view class="info">
                    <view class="flex-btw">
                      <view class="flex-middle">
                        <view v-show="canshowprice" class="red_font">
                          ¥{{ item.activity_price || item.market_price }} /{{
                            item.unit
                          }}</view
                        >
                        <view
                          v-show="canshowprice"
                          v-if="item.activity_price"
                          class="old_price"
                          >¥{{ item.market_price }} /{{ item.unit }}</view
                        >
                      </view>
                      <!-- #ifndef MP-WEIXIN -->
                      <my-stepper
                        :val="item.num"
                        :min="item.minimum"
                        :limit="
                          item.inventory_hd ? 1 : item.designated_inventory
                        "
                        :inventory="item.inventory_hd || item.inventory_left"
                        :index="index"
                        @plus="addAction"
                        @minus="subAction"
                        @showKey="
                          $refs.keyboard.open(
                            item.is_standard,
                            index,
                            item.minimum,
                            item.inventory_hd || item.inventory_left,
                            item.designated_inventory
                          )
                        "
                      >
                      </my-stepper>
                      <!-- #endif -->
                      <!-- #ifdef MP-WEIXIN -->
                      <my-stepper
                        :val="item.num"
                        :min="item.minimum"
                        :limit="
                          item.inventory_hd ? 1 : item.designated_inventory
                        "
                        :inventory="item.inventory_hd || item.inventory_left"
                        :index="index"
                        @plus="addAction"
                        @minus="subAction"
                        @showKey="
                          $refs.keyboard.open(
                            item.$orig.is_standard,
                            index,
                            item.$orig.minimum,
                            item.$orig.inventory_hd ||
                              item.$orig.inventory_left,
                            item.designated_inventory
                          )
                        "
                      >
                      </my-stepper>
                      <!-- #endif -->
                    </view>
                    <view>
                      <text class="bold">{{ item.goods_name }}</text>
                      <text class="tag">{{ item.spu_name }}</text>
                    </view>
                    <view class="flex wrap flex_col_center">
                      <text v-if="item.datum_activity" class="yellow_tag">{{
                        item.datum_activity
                      }}</text>
                      <text
                        v-for="(i, index) in item.datum"
                        :key="index"
                        class="red_tag"
                        >{{ i.title }}</text
                      >
                    </view>
                    <view class="inventory flex-btw">
                      <view>
                        <text v-if="item.minimum > 0"
                          >起订量：{{ item.minimum }}</text
                        >
                        <text
                          v-if="
                            item.inventory_hd || item.designated_inventory > 0
                          "
                          style="margin-left: 20rpx"
                          >库存：{{
                            Number(item.inventory_hd || item.inventory_left)
                          }}</text
                        >
                      </view>
                      <view
                        style="color: #e84b4b"
                        @click.stop="del(item.id, item.spu_id, 0, index)"
                      >
                        删除</view
                      >
                    </view>
                    <view class="flex-btw">
                      <view
                        class="note flex flex_col_center"
                        @click.stop="showNotePopup(item.note, item.id, index)"
                      >
                        <text style="font-weight: bold">备注：</text>
                        <view
                          v-if="item.note"
                          class="input"
                          placeholder="请输入你的备注"
                          >{{ item.note }}
                        </view>
                        <image
                          v-else
                          class="edit"
                          :src="edit_img"
                          alt=""
                        ></image>
                      </view>
                      <view v-if="item.is_enough == 0" class="cantadd"
                        >库存不足</view
                      >
                      <view v-else-if="item.status == 0" class="cantadd"
                        >已下架</view
                      >
                      <view v-else-if="item.is_del == 1" class="cantadd"
                        >已删除</view
                      >
                    </view>
                    <!-- #ifndef MP-WEIXIN -->
                    <u-alert-tips
                      v-if="item.is_origin_price"
                      type="warning"
                      description="超过限购数量，按原价购买"
                      style="padding: 2rpx 8rpx; font-size: 20rpx"
                      :desc-style="{ fontSize: '18rpx' }"
                    ></u-alert-tips>
                    <!-- #endif -->
                    <!-- #ifdef MP-WEIXIN -->
                    <u-alert-tips
                      v-if="item.is_origin_price"
                      class="tips"
                      type="warning"
                      description="超过限购数量，按原价购买"
                      :desc-style="{ fontSize: '20rpx', padding: '4rpx' }"
                    ></u-alert-tips>
                    <!-- #endif -->
                  </view>
                </view>
              </view>
            </template>
          </view>

          <!-- 积分 -->
          <view class="gifts" v-if="flag_jf">
            <view class="tit">积分商品</view>
            <view class="lists">
              <template v-for="(item, index) in dataList">
                <view
                  v-if="item.datum_activity == '积分'"
                  class="list flex-btw"
                >
                  <block v-if="item.datum_activity == '积分'">
                    <view style="display: flex; flex: 1">
                      <!-- #ifdef MP-WEIXIN-->
                      <!-- 微信小程序不认v-model !只可作用value!!!!! -->
                      <u-checkbox
                        class="checkbox flex-middle"
                        :value="item.isChecked"
                        :disabled="
                          item.is_enough == 0 ||
                          item.status == 0 ||
                          item.is_del == 1
                        "
                        @change="selectAction($event, index)"
                        :name="item.id"
                        size="24"
                        shape="circle"
                        active-color="#4fa388"
                      ></u-checkbox>
                      <!-- #endif -->
                      <!-- #ifndef MP-WEIXIN -->
                      <u-checkbox
                        class="checkbox flex-middle"
                        v-model="item.isChecked"
                        :disabled="
                          item.is_enough == 0 ||
                          item.status == 0 ||
                          item.is_del == 1
                        "
                        @change="selectAction($event, index)"
                        :name="item.id"
                        size="24"
                        shape="circle"
                        active-color="#4fa388"
                      ></u-checkbox>
                      <!-- #endif -->
                      <view class="left flex-btw">
                        <view class="flex-middle">
                          <img class="img" :src="item.img" alt="" />
                          <view class="flex-column" style="align-items: unset">
                            <text class="name">{{ item.goods_name }}</text>
                            <text class="jifen">{{ item.jf_points }}积分</text>
                          </view>
                        </view>
                        <text class="tag">积分</text>
                      </view>
                    </view>
                    <view class="flex-column">
                      <!-- #ifndef MP-WEIXIN -->
                      <my-stepper
                        :val="item.num"
                        :min="item.minimum"
                        :limit="
                          item.inventory_hd ? 1 : item.designated_inventory
                        "
                        :inventory="item.inventory_hd || item.inventory_left"
                        :index="index"
                        @plus="addAction"
                        @minus="subAction"
                        @showKey="
                          $refs.keyboard.open(
                            item.is_standard,
                            index,
                            item.minimum,
                            item.inventory_hd || item.inventory_left,
                            1
                          )
                        "
                      >
                      </my-stepper>
                      <!-- #endif -->
                      <!-- #ifdef MP-WEIXIN -->
                      <my-stepper
                        :val="item.num"
                        :min="item.minimum"
                        :limit="
                          item.inventory_hd ? 1 : item.designated_inventory
                        "
                        :inventory="item.inventory_hd || item.inventory_left"
                        :index="index"
                        @plus="addAction"
                        @minus="subAction"
                        @showKey="
                          $refs.keyboard.open(
                            item.$orig.is_standard,
                            index,
                            item.$orig.minimum,
                            item.$orig.inventory_hd ||
                              item.$orig.inventory_left,
                            1
                          )
                        "
                      >
                      </my-stepper>
                      <!-- #endif -->
                      <text class="store"
                        ><text
                          v-if="item.jf_once_gailimit > 0"
                          style="margin-right: 8rpx"
                          >单次限购：{{ item.jf_once_gailimit }}</text
                        >库存：{{
                          Number(item.inventory_hd || item.inventory_left)
                        }}</text
                      >
                    </view>
                  </block>
                </view>
              </template>
            </view>
          </view>

          <!-- 赠品 -->
          <view
            class="gifts"
            v-if="
              mjmz_content.type == 2 && mjmz_content.mz_info.zp_list.length > 0
            "
          >
            <view class="tit">赠品区</view>
            <view class="lists">
              <view
                class="list flex-btw"
                v-for="(item, index) in mjmz_content.mz_info.zp_list"
                :key="index"
              >
                <view class="left flex-middle">
                  <image class="img" :src="item.img"></image>
                  <text class="name"
                    >{{ item.goods_name }}【{{ item.spu_name }}】</text
                  >
                  <text class="tag">赠品</text>
                </view>
                <text>×{{ item.num }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="discounts_info flex-btw" v-if="mjmz_content.type">
          <!-- 满减 -->
          <view v-if="mjmz_content.type == 1" style="flex: 1">
            <text v-if="mjmz_content.mj_info.full_reduction_money != 0"
              >已减 {{ mjmz_content.mj_info.full_reduction_money }} 元</text
            ><text v-if="mjmz_content.mj_info.need_buy != 0"
              >再买
              <text class="red">{{ mjmz_content.mj_info.need_buy }}</text> 元减
              <text class="red">{{ mjmz_content.mj_info.will_reduction }}</text>
              元</text
            >
          </view>
          <!-- 满赠 -->
          <view v-if="mjmz_content.type == 2" style="flex: 1">
            <text v-if="mjmz_content.mz_info.got_zp"
              >已送 {{ mjmz_content.mz_info.got_zp }} </text
            ><text v-if="mjmz_content.mz_info.need_buy != 0">
              再买
              <text class="red">{{ mjmz_content.mz_info.need_buy }}</text> 元送
              <text class="red">{{ mjmz_content.mz_info.will_get }}</text></text
            >
          </view>
          <view>
            <view
              v-if="mjmz_content.add_item == 1"
              class="red"
              @click="toClassify"
              >去凑单<u-icon name="arrow-right"></u-icon>
            </view>
          </view>
        </view>
        <view class="accountBar flex-btw">
          <view class="all">
            <u-checkbox
              class="checkbox"
              v-model="isSelectAll"
              @change="selectAll"
              size="24"
              shape="circle"
              active-color="#4fa388"
            >
              全选</u-checkbox
            >
          </view>
          <view class="right">
            <view class="flex-center"
              >合计：
              <view class="flex-column">
                <text class="price">￥{{ allPrice }}</text>
                <text v-if="jf_total > 0" class="jf">积分-{{ jf_total }}</text>
              </view>
            </view>
            <view
              class="to flex-center"
              @click="toOrder"
              :style="
                JSON.stringify(checkedList.length) > 0 && allPrice > 0
                  ? ' '
                  : 'background:#CCCCCC'
              "
            >
              去结算({{ checkedList.length }})</view
            >
          </view>
        </view>

        <my-keyboard ref="keyboard" @confirm="inputPrice"></my-keyboard>
      </view>
    </view>
    <my-addcart ref="cart"></my-addcart>
    <my-tabar ref="tabar" current="1"></my-tabar>
    <u-popup v-model="showNote" mode="bottom" :mask-close-able="false">
      <view class="popup">
        <view class="popup_head flex-btw">
          <view @click="showNote = false">取消</view>
          <view @click="editNote">完成</view>
        </view>
        <textarea
          @input="noteAction"
          :value="note"
          class="textarea"
          placeholder="请输入你的备注"
          placeholder-style="color:#999"
        ></textarea>
      </view>
    </u-popup>
    <view class="nodata" v-if="dataList.length == 0">
      <image :src="nodataImg" mode="aspectFit"></image>
      <view>购物车空空如也~</view>
    </view>
  </view>
</template>

<script>
import { $https } from "@/static/js/request.js";
import MixinShowprice from "@/static/js/mixinshowprice.js";
export default {
  data() {
    return {
      edit_img: "../../static/image/edit.png",
      nodataImg: getApp().globalData.nodataImgCart,
      loginVolid: "",
      logo: "",
      showLogo: 0,
      showNote: false,

      dataList: [], //商品列表
      flag_jf: false, //是否有积分商品

      isSelectAll: true, //是否全选
      checkedList: [], //已选择的id
      note: "",
      noteId: "",
      totalNum: 0, //购物车总数
      mjmz_content: {}, //type:0:啥都没有, 1:满减 2:满赠
      jf_total: 0,
    };
  },
  mixins: [MixinShowprice],
  onReady() {
    getApp().setTitle();
  },
  onLoad() {
    this.loginVolid = !Boolean(uni.getStorageSync("loginVolid").is_login_cart);
  },
  onShow() {
    this.getData();
    // this.logo = uni.getStorageSync('logo');
    // this.showLogo = uni.getStorageSync('showLogo');
  },
  computed: {
    //计算总金额
    allPrice: function () {
      var price = 0,
        jf = 0;
      this.checkedList.map((item) => {
        this.dataList.map((i) => {
          if (item == i.id) {
            //计算积分
            if (i.datum_activity == "积分") {
              jf += Number(i.jf_points) * i.num;
            } else if (i.is_origin_price) {
              //超过限购用原价
              price += Number(i.market_price) * i.num;
            } else {
              //特价优先
              price += Number(i.activity_price || i.market_price) * i.num;
            }
          }
        });
      });
      this.jf_total = jf;
      return price.toFixed(2);
    },
  },
  methods: {
    getData() {
      var checkedId = [];
      $https(
        "GETN",
        "getCart",
        {},
        (res) => {
          var data = res.data.data.list;
          this.$refs.tabar.changetag(res.data.data.all_cart_num);
          this.totalNum = res.data.data.all_cart_num;
          this.mjmz_content = res.data.data.mjmz_content;
          this.flag_jf = res.data.data.flag_jf;
          //如果有数据，用原本的。否则获取新的商品
          if (this.dataList.length > 0) {
            // var oldData = JSON.parse(JSON.stringify(this.dataList))
            // var oldcheckedId = JSON.parse(JSON.stringify(this.checkedList))
            var oldData = this.dataList;
            var oldcheckedId = this.checkedList;
            var newData = [];
            for (let i in data) {
              for (let y in oldData) {
                if (data[i].id == oldData[y].id) {
                  //如果旧数据没改变，且新数据商品没有下架或删除 && data[i].goods_status!=0 && data[i].goods_is_del!=1
                  if (oldcheckedId.includes(data[i].id)) {
                    // if(data[i].goods_status!=0 && data[i].goods_is_del!=1){
                    if (
                      data[i].is_enough != 0 &&
                      data[i].status != 0 &&
                      data[i].is_del != 1
                    ) {
                      checkedId.push(data[i].id);
                      data[i].isChecked = oldData[y].isChecked;
                    } else {
                      data[i].isChecked = false;
                    }
                  }
                  newData.push(data[i]);
                  break;
                }
                //是新数据
                else if (y == oldData.length - 1) {
                  data[i].isChecked = true;
                  checkedId.push(data[i].id);
                  newData.push(data[i]);
                }
              }
            }
            this.checkedList = checkedId;
            this.dataList = newData;
          } else {
            for (let z in data) {
              // if(data[z].goods_status!=0 && data[z].goods_is_del!=1){
              if (
                data[z].is_enough != 0 &&
                data[z].status != 0 &&
                data[z].is_del != 1
              ) {
                data[z].isChecked = true;
                checkedId.push(data[z].id);
              } else {
                data[z].isChecked = false;
              }
            }
            this.checkedList = checkedId;
            this.dataList = data;
          }
        },
        this.loginVolid
      );
    },
    selectAll() {
      this.isSelectAll = !this.isSelectAll;
      var newCheck = [];
      for (let i in this.dataList) {
        //被下架删除的不可选中
        // if(this.dataList[i].goods_status !=0 && this.dataList[i].goods_is_del !=1){
        if (
          this.dataList[i].is_enough != 0 &&
          this.dataList[i].status != 0 &&
          this.dataList[i].is_del != 1
        ) {
          this.dataList[i].isChecked = this.isSelectAll;
          newCheck.push(this.dataList[i].id);
        }
      }
      if (this.isSelectAll == false) {
        this.checkedList = [];
      } else {
        this.checkedList = newCheck;
      }
    },
    selectAction(data, index) {
      // #ifdef MP-WEIXIN
      // 小程序v-model没用，无法双向绑定了。。只能自己赋值
      this.dataList[index].isChecked = !this.dataList[index].isChecked;
      // #endif
      if (!data.value) {
        for (let i in this.checkedList) {
          if (this.checkedList[i] == data.name) {
            this.checkedList.splice(i, 1);
          }
        }
      } else {
        this.checkedList.push(data.name);
      }
    },
    //添加修改备注
    editNote() {
      let value = this.note;
      // if(value){
      $https(
        "POSTN",
        "editCartNote",
        {
          cart_id: this.noteId,
          note: value,
        },
        (res) => {
          if (res.data.errcode != 0) {
            uni.showToast({
              title: "修改备注失败，请重试",
              icon: "none",
            });
          } else {
            this.showNote = false;
            uni.showToast({
              title: "修改备注成功",
              icon: "none",
            });
            this.dataList[this.noteIndex].note = this.note;
          }
        }
      );

      // }
    },
    showNotePopup(note, id, index) {
      this.note = "处理textarea默认样式不生效";
      let timeId = setTimeout(() => {
        this.note = note;
        clearTimeout(timeId);
      }, 50);
      this.showNote = true;
      this.noteId = id;
      this.noteIndex = index;
    },
    noteAction(data) {
      this.note = data.detail.value;
    },
    //＋
    addAction(data) {
      var index = data.index,
        min = Number(data.min),
        limit = Number(data.limit),
        inventory = Number(data.inventory),
        val = Number(data.value);
      if (val < min) {
        val = min;
      } else if (limit > 0 && val + 1 >= inventory) {
        //不能超过库存量
        val = inventory;
        uni.showToast({
          icon: "none",
          title: "库存不足",
        });
      } else {
        val++;
      }
      this.addToCart(
        this.dataList[index].id,
        this.dataList[index].spu_id,
        val.toFixed(2),
        index
      );
    },
    //-
    subAction(data) {
      var index = data.index,
        min = Number(data.min),
        inventory = Number(data.inventory),
        val = Number(data.value),
        enough = false;
      if (val - 1 < min) {
        val = 0;
      } else {
        val--;
      }
      if (val <= data.inventory) {
        enough = true;
      }
      this.addToCart(
        this.dataList[index].id,
        this.dataList[index].spu_id,
        val.toFixed(2),
        index,
        enough
      );
    },
    //输入数量
    inputPrice(data) {
      var value = Number(data.value),
        index = data.index,
        enough = false;
      //在购物车里超过库存后，数量减到库存之下，库存不足标识应去掉
      if (value <= data.inventory) {
        enough = true;
      }
      this.addToCart(
        this.dataList[index].id,
        this.dataList[index].spu_id,
        value.toFixed(2),
        index,
        enough
      );
    },
    //加入购物车
    addToCart(goodsId, spuId, num, index, enough) {
      var options = {
        goods_id: goodsId,
        spu_id: spuId,
        num,
      };
      $https("POSTN", "changeCart", options, (res) => {
        if (res.data.errcode == 0) {
          console.log(res.data.data.all_cart_num);
          this.$refs.tabar.changetag(res.data.data.all_cart_num);
          //成功后修改数量
          this.dataList[index].num = Number(num);
          //修改库存不足状态
          if (enough) {
            this.dataList[index].is_enough = 1;
          }
          //如果等于0就取消勾选
          if (num == 0) {
            this.checkedList.splice(index, 1);
            this.dataList.splice(index, 1);
          }
          if (res.data.data.mjmz_content) {
            this.mjmz_content = res.data.data.mjmz_content;
          }
          if (res.data.data.tm_content) {
            this.dataList[index].is_origin_price = 1;
          } else {
            this.dataList[index].is_origin_price = 0;
          }
        } else if (res.data.errcode == 50009) {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    //清空购物车
    clearCart() {
      uni.showModal({
        content: "是否清空购物车",
        confirmColor: "#4FA388",
        success: (res) => {
          if (res.confirm) {
            $https("GET", "delCart", {}, (result) => {
              if (result.data.errcode == 0) {
                this.checkedList = [];
                this.getData();
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    //删除某一商品
    del(id, spuId, num, index) {
      uni.showModal({
        content: "是否删除该商品",
        confirmColor: "#4FA388",
        success: (res) => {
          if (res.confirm) {
            this.addToCart(id, spuId, num, index);
          }
        },
      });
    },
    //提交订单
    toOrder() {
      if (this.checkedList.length > 0 && this.allPrice > 0) {
        var params = JSON.stringify(this.checkedList);
        uni.navigateTo({
          url: `/pages/shopcart/submitorder?ids=${params}`,
        });
      } else {
        uni.showToast({
          title: "下单金额必须大于0！",
          icon: "none",
        });
      }
    },
    toDetail(id, index) {
      var data = this.dataList[index];
      if (data.is_del != 1 && data.status != 0) {
        uni.navigateTo({
          url: `/pages/index/shopdetail?id=${id}`,
        });
      }
    },
    toClassify() {
      uni.switchTab({
        url: "/pages/tabar/classify",
      });
    },
  },
};
</script>

<style lang="scss">
page {
  overflow: auto;
}

/deep/.uicon-checkbox-mark:before {
  transform: scale(0.7);
}

// #ifdef MP-WEIXIN
/deep/.tips .u-alert-tips {
  padding: 0 4rpx !important;
  margin-top: 8rpx;
}

// #endif
.shopcart {
  .nodata {
    img {
      width: 312rpx;
    }
  }

  .popup {
    background: #eee;
    height: 500rpx;
    display: flex;
    flex-direction: column;

    .popup_head {
      height: 100rpx;
      padding: 0 40rpx;
      background: #f4f4f4;
      font-size: 32rpx;
      color: #737373;

      > view:last-child {
        color: #4fa388;
      }
    }

    .textarea {
      flex: 1;
      width: 100%;
      padding: 20rpx 40rpx;
      box-sizing: border-box;
      background: #fff;
    }
  }

  .head {
    position: fixed;
    left: 0;
    right: 0;
    //#ifndef MP-WEIXIN
    top: var(--status-bar-height);
    // #endif
    //#ifdef MP-WEIXIN
    top: 0;
    // #endif
    padding: 10rpx 34rpx;
    height: 80rpx;
    box-sizing: border-box;
    z-index: 2;
    font-size: 20rpx;
    color: #737373;
    background: #f6f6f7;
    box-shadow: 0rpx 10rpx 20rpx #eee;

    .tit {
      font-size: 32rpx;
      color: #191919;
      font-weight: 600;
      padding-left: 20rpx;
    }

    .del {
      font-size: 28rpx;
      color: $dgreen;
    }

    .all {
      margin-top: 10rpx;

      /deep/.u-checkbox__label {
        font-size: 20rpx;
      }
    }
  }

  .content {
    width: 100%;
    margin: 140rpx 0 200rpx;
    //#ifndef MP-WEIXIN
    margin-top: calc(var(--status-bar-height) + 140rpx);
    // #endif
    //#ifdef MP-WEIXIN
    margin-top: 140rpx;

    // #endif
    // padding:0 30rpx;
    .u-checkbox-group {
      width: 100%;
    }

    .all_good {
      width: 100%;

      .sign_good {
        padding: 28rpx 30rpx;
        border-bottom: 1px solid #e7e8e8;

        .imgs {
          position: relative;

          .logo {
            width: 40rpx;
            height: 40rpx;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
          }
        }
      }

      .disable {
        background: #e2e2e3;
      }

      .img {
        width: 116rpx;
        height: 116rpx;
      }
    }

    .info {
      flex: 1;
      margin-left: 40rpx;
      font-size: 28rpx;

      > view + view {
        margin-top: 6rpx;
      }

      .old_price {
        font-size: 20rpx;
        color: #cccccc;
        margin-left: 8rpx;
        text-decoration: line-through;
      }

      .note {
        font-size: 24rpx;

        .input {
          flex: 1;
          font-size: 24rpx;
          background: #ededed;
          color: #9a9a9a;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          white-space: normal;
          word-break: break-all;
        }

        .edit {
          width: 22rpx;
          height: 22rpx;
        }
      }

      .cantadd {
        background: #bcbcbd;
        color: #fff;
        padding: 8rpx 10rpx;
        border-radius: 4rpx;
        font-size: 20rpx;
        white-space: nowrap;
        margin-left: 10rpx;
      }

      .tag {
        margin-left: 20rpx;
        padding: 0 8rpx;
        background: #e3e3e3;
        border-radius: 8rpx;
        font-size: 16rpx;
      }

      .red_tag {
        font-size: 20rpx;
        padding: 0 12rpx;
      }

      .yellow_tag {
        font-size: 20rpx;
        padding: 0rpx 12rpx;
        margin-right: 6rpx;
        color: #fff;
        background: #f7c23e;
        border-radius: 8rpx;
      }

      .inventory {
        color: #737373;
        font-size: 20rpx;

        > text + text {
          margin-left: 20rpx;
        }
      }
    }

    .total_money {
      width: 564rpx;
      height: 80rpx;
      color: #fff;
      background: #4fa388;
      box-shadow: 0px 2rpx 14rpx 2rpx rgba(0, 0, 0, 0.2);
      border-radius: 48rpx;
      position: fixed;
      bottom: 160rpx;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 9;

      &.gray {
        background: #ccc;
      }
    }

    .discounts_info {
      position: fixed;
      bottom: 216rpx;
      left: 0;
      right: 0;
      background: #fffbe7;
      padding: 10rpx 32rpx;
      color: #191919;
      font-size: 28rpx;
      box-shadow: 0px -2px 2px 0px rgba(0, 0, 0, 0.06);

      .red {
        color: #e84b4b;
        margin: 0 8rpx;
      }
    }

    .accountBar {
      position: fixed;
      bottom: 100rpx;
      left: 0;
      right: 0;
      height: 116rpx;
      padding-left: 24rpx;
      background: #fff;
      border-bottom: 1px solid #e8e8e8;
      color: #737373;

      .right {
        display: flex;
        align-items: center;

        .price {
          color: #e84b4b;
          font-size: 32rpx;
        }

        .jf {
          color: #e84b4b;
          font-size: 24rpx;
        }

        .to {
          margin-left: 30rpx;
          width: 210rpx;
          height: 116rpx;
          background: $dgreen;
          color: #fff;
        }
      }
    }

    .gifts {
      background: #fff;
      margin: 20rpx 34rpx;
      padding: 22rpx 40rpx;
      border-radius: 6rpx;

      .tit {
        text-align: center;
        color: #191919;
        font-size: 28rpx;
        margin-bottom: 14rpx;
        font-weight: bold;
      }

      .img {
        display: inline-block;
        width: 58rpx;
        height: 58rpx;
        margin-right: 26rpx;
        border-radius: 4rpx;
      }

      .name {
        font-size: 24rpx;
        color: #191919;
      }

      .jifen {
        color: #737373;
        font-size: 20rpx;
      }

      .list {
        margin: 20rpx 0;

        .left {
          flex: 1;
        }

        .store {
          color: #737373;
          font-size: 20rpx;
          margin-top: 12rpx;
        }

        .tag {
          font-size: 18rpx;
          padding: 4rpx 10rpx;
          // transform: scale(0.8);
          color: #fff;
          background: #f7c23e;
          border-radius: 8rpx;
          margin-right: 20rpx;
        }
      }
    }
  }
}
</style>
